<template>
  <div id="container">
    <h1>我是child组件</h1>
    {{ fromsmallchild }}
    <hr />
    <button @click="add">+1</button>
    <hr>
    <span ref="span1">这里可以被app组件用ref操作</span>
    <hr>
    <span>这是app组件共享的数据：{{globalcolor.colors}}</span>
  </div>
</template>

<script>
import bus from "../eventBus/eventBus.js";
export default {
  data() {
    return {
      num: 0,
      fromsmallchild: "",
    };
  },
 inject:{
   globalcolor:{
     
   }
 },
  methods: {
    add: function () {
      this.num++;

      this.$emit("childchange", this.num);
    },
    changefontcolor(){
      this.$refs.span1.style.color="grey"
      }
  },
  created() {
    bus.$on("share", (val) => {
      this.fromsmallchild = val;
    });
  },
};
</script>

<style scoped>
#container{
  background-color: blue;
  height: 200px;
}
</style>